html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
html,body {height: 100%;font-size: 20px;font-family: "Arial","Microsoft YaHei","Tahoma";}
ul,ol,li {list-style: none;}
a {text-decoration: none;}
#ui-view {width: 100%;height: 100%;}
.page-transform {width: 100%;height: 100%;}
/*home*/
.screen-page {width: 100%;height: 100%;overflow: hidden;position:relative;z-index: 2;}
.page-index-bg {background-color: #FFCE37;}
.tree {position: absolute;z-index: 1;top:-2.8rem;left: 4rem;}
.box-modal-age .fn-box {}

/*test*/
.test-flash {line-height: 0;overflow: hidden;}
.page {width: 100%;height: 100%;display: none;}
.page.page-current {display: block;}




/**/

.page-from-right-to-center {
    -webkit-animation: pageFromRightToCenter 0s forwards;
    animation: pageFromRightToCenter 0s forwards;
    z-index: 2002
}
.page-from-center-to-left {
    -webkit-animation: pageFromCenterToLeft .1s forwards;
    animation: pageFromCenterToLeft .1s forwards
}

.page-from-left-to-center {
    -webkit-animation: pageFromLeftToCenter .1s forwards;
    animation: pageFromLeftToCenter .1s forwards
}



ul,ol,li {list-style: none;margin: 0;padding: 0;}
.page, .page-group {background: transparent;}
.box-moadal {width: 100%;height: 100%;position: relative;z-index: 0;}
.bg {position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 1;}
.male-animate {position: relative;z-index: 2;width: 12.5rem;height:12rem;margin-left: auto;margin-right: auto;margin-bottom: 0.5rem;}
.male-bg-male {display: none;}
.male-icon {
    position: absolute;right: 0;top:-1rem;width: 3rem;

}
.male {
    position: absolute;left: 3.8rem;top:-1rem;width: 5.4rem;
}
.male-icon-male {display: none;}
.male-bg-sex {max-width: 100%;}
.box-modal-sex {padding-top:3rem;}
.fn-box  {position: relative;z-index: 102;}
.choice-text {text-align: center;font-size: 0.9rem;}
.choice-text > img {display: inline-block;padding-right: 0.2rem;}
.button-bg {width: 70%;height: 2.5rem;background-color: #fff;margin-right: auto;margin-left: auto;-webkit-border-radius:2rem;
    -moz-border-radius:2rem;
    border-radius:2rem;
    -webkit-box-shadow: 5px 10px 5px #f5b514;
    -moz-box-shadow: 5px 10px 5px #f5b514;
    box-shadow: 5px 10px 5px #f5b514;
}

.button-bg a {display:block;text-align:center;line-height:2.5rem;color: #000;font-size: 0.95rem;font-weight: bold;}
.step-a {}
.box-modal-age {padding-top: 4rem;}
.age-animate {width: 11.8rem;margin-left: auto;margin-right: auto;position: relative;z-index: 2;}
.age-animate > img {display: block;max-width: 100%;position: relative;z-index: 2;}
.age-content {position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 3;}
.age-content .swiper-container {height: 100%;}
.age-content .swiper-slide {width: 100%;height:100%;padding-top:3rem;text-align: center;font-size: 2rem;font-weight:bold;line-height: 3rem;}
.age-content .swiper-button-next, .swiper-button-prev {width: 1.05rem;height: 1.6rem;}
.age-content .swiper-button-prev {background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/arrow-left.svg") no-repeat scroll 0 0;}
.age-content .swiper-button-next {background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/arrow-right.svg") no-repeat scroll 0 0;}
.box-modal-play {padding-top: 1rem;}
.play-animate {width: 12.6rem;margin-left: auto;margin-right: auto;position: relative;}
.play-animate > img {display: block;max-width: 100%;}
.play-content {position: absolute;left: 0;top:0;padding: 1.5rem;}
.play-title {font-size: 1rem;font-weight: bold;margin-top: 0.5rem;}
.play-ps {font-size: 0.7rem;color:#999999;margin-top: 1rem;}
.provision-text {font-size: 0.7rem;color: #999999;}
.provision-a {color:#F39D21;font-size: 0.7rem;}
.provision i {display:inline-block;vertical-align:middle;width:1.2rem;height: 1.2rem;background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/radio-a.svg") no-repeat scroll 0 0;background-size:100% auto;}
.provision i.active {width:1.2rem;height:1.2rem;background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/radio-b.svg") no-repeat scroll 0 0;background-size: 100% auto;}
.howplay-ul {font-size: 0.7rem;color: #999999;padding-top: 1rem;padding-bottom: 1rem;}
.howplay-ul li {line-height: 1.4rem;}
.howplay-ul li i {display: inline-block;margin-right:0.5rem;width: 0.6rem;height: 0.6rem;border: 0.1rem solid #F39D21;border-radius: 50%;vertical-align: middle;}
.howplay-ul li.active i {background-color:#F39D21; }
.option.active {background-color: #f6b214;}
.option i {background-size: 100% auto;display: block;position: absolute;left:20px;bottom: 10px;}
.option0 {background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/option-1.svg") no-repeat scroll 0 0;width: 23px;height: 23px;}
.option1 {background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/option-2.svg") no-repeat scroll 0 0;width: 19.5px;height: 23.5px;}
.option2 {background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/option-3.svg") no-repeat scroll 0 0;width: 17px;height: 23.5px;}
.option3 {background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/option-4.svg") no-repeat scroll 0 0;width: 30.5px;height: 23.5px;}
.option4 {background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/option-5.svg") no-repeat scroll 0 0;width: 25px;height: 23.5px;}

/*test*/
#canvas {max-width: 100%;}
.test-flash {width: 100%;overflow: hidden;line-height: 0;}
.test-flash embed {width: 100%;max-width: 100%;}

.question-title-img  img {display: block;margin-left:auto;margin-right: auto;}
.question-title-text {text-align: center;font-size: 0.7rem;}
.question-box {padding:0.5rem 1rem 0 1rem;}
.question-option {padding-left: 2rem;padding-right: 2rem;}
.option {
    color: #8e5424;
    background-color: #ffd72e;border-radius: 2rem;position: relative;font-size:0.65rem;text-align: center;padding: 0.4rem;margin-top: 0.7rem;
    -webkit-box-shadow: 2px 5px 2px #f5b514;
    -moz-box-shadow: 2px 5px 2px #f5b514;
    box-shadow: 2px 5px 2px #f5b514;
}

#rf .swiper-button-next, #rf .swiper-button-prev {display: none;}



.box-modal-sex .button-bg {margin-top: 2rem;}
.age-animate {}
.box-modal-age .button-bg {margin-top: 1.52rem;}
.box-modal-play .button-bg {margin-top: 2.69rem;}

/*aaaaaaa*/

.submitpage {background: #fff;}
ul li{list-style: none;}
.submitpage .page, .submitpage .page-group{background: #fff;}
.head-bg{width: 100%;height: 180px;background:#FFDE31;position: relative;overflow: hidden; }
.head-bg .img{width: 80%;height: 282px;background:url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/flicker-bg.svg") no-repeat center center; background-size: 100% auto; animation:play  3s infinite linear ;position: absolute;left: 10%;top: 0;z-index: 9;}
.head-bg .img-head{position: absolute;z-index: 99;bottom:-4px;left: 50%;display: table;margin-left: -127px;width: 254px}
.head-bg .img-head img{display: block;margin: 0 auto;width: 100%;}
.head-bg .boy-ico::before{content: "";width: 60%;height: 100%;background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/boy-ico.svg") no-repeat 18%;display: inline-block;position: absolute;left:10%;background-size: 100% auto;}
.head-bg .girl-ico::before{content: "";width: 100%;height: 100%;background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/girl-ico.svg") no-repeat 18%;display: inline-block;position: absolute;}
.head-bg .girl-ico::before{content: "";width: 100%;height: 100%;background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/girl-ico.svg") no-repeat 18%;display: inline-block;position: absolute;}
@keyframes play{
    0% {
        transform:rotate(0deg);  }
    100% {
        transform:rotate(360deg);  }
}
.wei-blog{margin:30px auto;}
.wei-blog img{display: block;margin: 0 auto;width: 3.2rem;}
.wei-blog h2{font-size: 0.9rem;text-align: center;}
.wei-blog  input{width: 70%;height: 1.3rem;border:2px solid #595757;border-radius: 10px;text-align: center;margin: 1rem auto 0;display: block;font-size: 0.65rem;}
.submit-btn{width: 70%;height: 50px;font-size:0.95rem;background: #ffde32;border-radius: 12px;color: #000;text-align: center;line-height: 50px;display: block;position: absolute;left: 50%;margin-left: -35%;bottom:20px;}


/* 结果页 */
.results-des{margin: 0 auto;}
.results-des .show-head{width: 100%;height: 200px;margin-top: -0.7rem;}
.results-des .boy-head{background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/show-boy-head.svg") no-repeat center;}
.results-des .girl-head{background: url("http://unidt.oss-cn-shanghai.aliyuncs.com/survey/www/img/show-girl-head.svg") no-repeat center;background-size: 100%;}
.results-des .describe{margin: 0 auto;}
.results-des .describe img{display: block;margin: 0 auto;}
.results-des .describe{margin: 30px auto;}
.describe > img {width: 2.5rem;}
.results-des .describe h2{font-size: 0.7rem;text-align: center;margin-top: 0.2rem;}
.results-des .describe p{width: 80%;margin: 0.2rem auto 0;color: #666;font-size: 0.65rem;}
.results-des .report{position:absolute;left: 0 ;bottom:0;width: 100%;}
.results-des .report span{width: 33.33%;float: left;text-align: center;font-weight: bold;font-size: 0.8rem;}
.results-des .report span img{display: block;margin: 0 auto 10px;}
.detail-btn img {margin: 0 auto;}
.results-des .report span  i{font-style:inherit;}
.results-des .report .share-result, .results-des .report .play-again{padding-top: 3rem;}
.results-des .report span.detail-btn{position: relative;}
.report a {color: #000;font-size: 0.8rem;}
.results-des .report span.detail-btn a{position: absolute;left: 32%;top: 25%;color: #000;}

/* 详情页 */
.cold-fusion{margin: 0 auto;overflow: auto;}
.cold-fusion .head{width: 100%;height: 200px;background: #ffde32;}
.cold-fusion .head-new{background: #fff;position: fixed;left: 0;top: 0;z-index: 999;height: 50px !important;}
.cold-fusion .head .radar-map{width:375px;height: 250px;margin: 0 auto;position: fixed;top:40px;right: 0;z-index: 99;overflow: auto;}
.cold-fusion .head .radar-map div{overflow: auto !important;top: 0 !important;}
.cold-fusion .chara_list{margin:90px auto ;box-sizing:initial;padding-left:1rem;padding-right:1rem;padding-bottom: 100px;}
.cold-fusion .chara_list_new{height: 80%;overflow: auto;}
.cold-fusion .chara_list li{margin: 20px auto 40px;}
.cold-fusion .chara_list li .tit{margin: 0 auto;width: auto;overflow: auto;}
.cold-fusion .chara_list li .tit .tit-explain{width: 70%;float: left;margin-top: 10px;}
.cold-fusion .chara_list li .tit .tit-explain h2{font-size: 0.7rem;margin: 0 auto;}
.cold-fusion .chara_list li .tit .tit-explain  .schedule{width: 100%;height: 10px;background: #f3f3f3;border-radius: 20px;display: inline-block;position: relative;}
.cold-fusion .chara_list li .tit .tit-explain  .schedule em{position: absolute;width: 80%;background: #a8e318;left: 0;top: 0;height: 10px;border-radius: 20px;}
.cold-fusion .chara_list li .tit .tit-explain .schedule{}
.cold-fusion .chara_list li .tit .grade{width: 20%;float: right;position: relative;}
.cold-fusion .chara_list li .tit .grade span{position: absolute;left: 16px;bottom: 10px;font-weight: bold;font-family: pictograph;}
.cold-fusion .chara_list li .tit .grade span.sty{bottom: 20px;}
.cold-fusion .chara_list li p{margin: 20px auto;color: #666;clear: both;font-size: 0.65rem;}
.pull-down{position: fixed;left: 50%;bottom: 10px;animation: start 1.5s infinite ease-in-out;}


.cold-fusion .report{position:fixed;left: 0 ;bottom:-50%;width: 100%;background: #fff;}
.cold-fusion .report span{width: 33.33%;float: left;text-align: center;font-weight: bold;}
.cold-fusion .report span img{display: block;margin: 0 auto;}
.cold-fusion .report span  i{font-style:inherit;}
.cold-fusion .report .share-result,.cold-fusion .report .play-again{padding-top: 44px;}
.cold-fusion .report span.detail-btn{position: relative;}

.cold-fusion .report span.detail-btn a{position: absolute;left: 38%;top: 38%;color: #000;}

@-webkit-keyframes start {
    0%,30% {
        opacity: 0;
        -webkit-transform: translate(0,-10px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0,8px)
    }
}

@media screen and (max-width: 320px) {
    .head-bg{height: 180px;}
    .head-bg .img{height: 180px;}
    .head-bg .img-head{width: 45%;margin-left: -25%;}
    .wei-blog{margin: 20px auto;}
    .submit-btn{bottom: 6%;}
    .cold-fusion .head .radar-map{width: 320px;}
}

@media screen and (min-width: 412px) {
    .cold-fusion .head .radar-map{width: 414px;height: 300px;}
    .cold-fusion .chara_list{margin:160px auto;}
    .score-box {width:70%;}
    .box-modal-sex {padding-top: 5rem;}
    .male-animate {width: 15rem;padding-bottom: 1.08rem;}
    .male-icon {right: 1rem;top:-0.5rem;}
    .male {width: 6rem;right:4.3rem;}
    .fn-box {padding-top: 4rem;}
    .age-animate {width: 15rem;}
    .box-modal-age {padding-top: 5rem;}
    .tree {left: 5.8rem;}
    .box-modal-play {padding-top: 3rem;}
    .play-animate {width: 15rem;}
    .box-modal-play {padding-top: 1.1rem;}
    #canvas {width: 414px;}
    .question-box {padding: 2rem;}
    .question-title-text {font-size: 0.9rem;}
    .option {font-size: 0.8rem;padding: 0.5rem;margin-top: 1rem;}
    .question-title-img {width: 4rem;margin-left: auto;margin-right: auto;}
    .question-title-img img {display: block;max-width: 100%;}
    .option0 {width: 46px;height: 46px;}
    .option1 {width: 41px;height: 45px;}
    .option2 {width: 38px;height: 45px;}
    .option3 {width: 65px;height: 46px;}
    .option4 {width: 56px;height: 46px;}
}







